<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>event &lsaquo; KISSY Docs</title>
<link rel="stylesheet" href="../assets/base-min.css" />
<link rel="stylesheet" href="../assets/docs.css" />
</head>
<body class="w866">
<div id="header">
    <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74" /></a>
    <p class="rel-nav">
        <a href="http://github.com/kissyteam/kissy/blob/master/src/event/event.js"><code>event.js</code></a>
    </p>
</div>
<div id="content" class="layout grid-s232m0">
    <div class="col-main">
        <div class="main-wrap">

            <div class="section summary">
                <p>KISSY.Event 提供添加、删除监听函数的事件操作方法。你可以用它来操作 DOM 对象的事件，也可以用来操作自定义 EventTarget 对象的事件。<em>与事件相关的功能，只要你能想到，它基本上都能做到。</em>赶快了解它吧，从这里开始。</p>
            </div>

            <div class="section">
                <h3 id="methods">Methods</h3>

                <div class="member method">
                    <h4>
                        <a name="method_add">add</a>
                        <code>void <em>add</em> ( target, type, fn, scope )</code>
                        <code>void <em>on</em> ( target, type, fn, scope )</code>
                    </h4>
                    <div class="detail">
                        <p>给目标对象指定类型的事件添加监听函数。</p>
                        <p>on 是 add 的别名。</p>
                        <dl class="parameters">
                            <dt>Parameters:</dt>
                            <dd>
                                <code class="param-name">target</code>
                                <code class="param-type">&lt;EventTarget&gt;</code>
                                事件目标对象。可以是选择器或数组。
                            </dd>
                            <dd>
                                <code class="param-name">type</code>
                                <code class="param-type">&lt;String&gt;</code>
                                事件类型。可以是空格分隔的多个类型。
                            </dd>
                            <dd>
                                <code class="param-name">fn</code>
                                <code class="param-type">&lt;Function&gt;</code>
                                监听函数。执行时，接收 1 个参数：事件对象 ev.
                            </dd>
                            <dd>
                                <code class="param-name">scope</code>
                                <code class="param-type">&lt;Object&gt;</code>
                                监听函数的 this Object. 默认指向 target.
                            </dd>
                        </dl>
<pre class="example-code"><code>
var S = KISSY, Event = S.Event;

// 最常规的用法
Event.add(document, 'click', function(ev) {
    // handle code
});

// 支持选择器
Event.add('.class', 'click', function(ev) {
    // handle code
});

// 支持多类型
Event.add('#id', 'mouseenter mouseleave', function(ev) {
    // handle code
});
</code></pre>
                        <p>不要怀疑，就这么简单。因为本来就应该如此简单！</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_remove">remove</a>
                        <code>void <em>remove</em> ( target, type, fn )</code>
                    </h4>
                    <div class="detail">
                        <p>从目标对象中移除监听函数。</p>
                        <p>参数和 add 一致，无需多说。直接看代码：</p>
<pre class="example-code"><code>
var S = KISSY, Event = S.Event;

// 最常规的用法
Event.remove(el, 'click', fnName);

// 支持选择器
Event.remove('.class', 'click', fnName);

// 支持多类型
Event.remove('#id', 'focus mouseover', fnName);

// 支持移除特定事件类型下所有监听函数
Event.remove(el, 'click');

// 支持移除特定元素下的所有事件类型的所有监听函数
Event.remove(el);
</code></pre>
                        <p class="tips">在 ie 下，当页面关闭时，KISSY 会自动移除掉通过 KISSY 注册的所有事件。这能有效避免 ie 下由事件注册导致的内存泄漏。</p>
                    </div>
                </div>

            </div>

            <div class="section notes">
                <p>囧，这么简单，也敢号称“只要你能想到，它基本上就能做到”？请稍安毋躁，精彩才刚上映。</p>
                <p>继续阅读 <a href="event-object.html">event-object</a></p>
            </div>
        </div>
    </div>
    <div class="col-sub">
        <div class="sub-wrap">
            <div class="loc">
                <a href="../index.html">home</a> &rsaquo;
                <a href="index.html">event</a> &rsaquo;
                event :
            </div>
            <div class="toc">
                <h3>Methods</h3>
                <ul>
                    <li><a href="#method_add">add</a></li>
                    <li><a href="#method_add">on</a></li>
                    <li><a href="#method_remove">remove</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <p class="copyright">&copy; 2009 - 2029 KISSY UI LIBRARY</p>
</div>
</body>
</html>
